<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="breadcrumb">
   
    <template v-for="(item, index) in breadcrumbss" :key="index">
      <router-link :to="item.path"><el-button @click="ChangePath">{{ item.name }}</el-button></router-link>
      <el-icon 
      style="cursor: pointer;background: #ccc;padding: 5px;border-radius: 50%;position: relative;top: 5px;right: -5px; font-size: large;" 
       @click="Deletebreadcrumbss(index)">
        <Close />
      </el-icon>
      <span v-if="index < breadcrumbss.length - 1">  —— </span>
    </template>
  </div>
</template>

<script setup>
import { onMounted ,watch,reactive} from 'vue';
import {useRoute,useRouter} from 'vue-router'
const router = useRouter();
const route = useRoute();
const breadcrumbss = reactive([]);

onMounted(()=>{
  ChangePath()
})
watch(() => route.path,(oldVal, newVal)=>{

  if(oldVal!== newVal){
    ChangePath()
  }
})

const ChangePath=()=>{
      const paths = {
        path:route.path ,
        name:route.meta.name
      }
      const result = breadcrumbss.filter(item => item.name === paths.name)
      if (!result.length) {
        breadcrumbss.push(paths)
  }
}

const Deletebreadcrumbss = (index)=>{
      breadcrumbss.splice(index, 1)
      console.log(breadcrumbss[index - 1].path);
      router.push(breadcrumbss[index - 1].path)
}



</script>

<style lang="scss" scoped>
  .breadcrumb{
    width: 100%;
    height: 32px;
    overflow: hidden;
    margin-bottom: 10px;
  }
</style>